<template>
  <el-dialog
    class="public-dialog"
    :title="batchType ? '批量修改' + modeOpt[remarkType] : '修改' + modeOpt[remarkType]"
    width="560"
    v-model="visible"
    @close="handleClose"
    draggable
    align-center
    :append-to-body="true"
    :close-on-click-modal="false"
  >
    <el-form ref="formRef" :model="formData" label-position="top" label-width="90px">
      <el-form-item v-if="batchType">
        <!-- label="选中数据" -->
        选中数据
        <div class="text-[#70abff] ml-[8px]">{{ remarkId.length }}</div>
      </el-form-item>
      <el-form-item label="操作类型" prop="is_append" :rules="[{ required: true, message: '请选择', trigger: 'change' }]" v-if="batchType">
        <el-select v-model="formData.is_append" class="w-[100%]" placeholder="请选择">
          <el-option label="修改" :value="0" />
          <el-option label="追加" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item :label="modeOpt[remarkType]" prop="remarkText" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
        <el-input v-model="formData.remarkText" :rows="5" type="textarea" placeholder="备注" />
      </el-form-item>
    </el-form>

    <template #footer>
      <!-- <span class="flex justify-center py-[10px]"> -->
      <el-button :disabled="loading" @click="handleClose(false)"> 取消 </el-button>
      <el-button type="primary" :loading="loading" @click="handleSave"> 保存 </el-button>
      <!-- </span> -->
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import api from "../../api"
import { ElMessage } from "element-plus"
// import _ from 'lodash'
const props = defineProps({
  // modelValue: { type: Boolean, default: false },
  // rows: { type: Array, default: () => [] },
})

// const currentRow = ref([])
// const modelAllSel = ref('')

// watch(() => props.rows, value => {
//   if (value) currentRow.value = value
// }, {deep: true})

const emit = defineEmits(["refresh"])

// const visible = ref(false)
const loading = ref(false)
// const tableRef = ref()
// const tableData = [{ a4: 1 }, { a4: 3 }, { a4: '2' }]

// const handleBatchSelect = va => {
//   visible.value = false
//   const curVal = modelAllSel.value
//   const data = currentRow.value
//   data.forEach((item, index) => {
//     data[index].marking_method_id = curVal
//   })
// }
const formRef = ref()
const formData = ref({
  is_append: "",
})

// const visibleValue = ref(false)
const visible = ref(false)
const remarkType = ref("")
const remarkText = ref("")
const batchType = ref(false)
const remarkId = ref([])
const modeOpt = ref({
  order_remark: "订单备注",
  shipping_remark: "发货备注",
  customer_service_remark: "客服备注",
  logistics_remark: "物流备注",
})

const modeOpts = ref({
  order_remark: 1,
  shipping_remark: 3,
  customer_service_remark: 4,
  logistics_remark: 5,
})
const handleSave = async () => {
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      try {
        loading.value = true
        let params = {
          ids: remarkId.value,
          remark: formData.value.remarkText,
          is_append: formData.value.is_append,
          mode: modeOpts.value[remarkType.value],
        }
        api.batchRemarkOrder(params).then((res) => {
          handleClose()
          // visible.value = false
          // setTimeout(() => {
          //   // remarkText.value = ""
          //   // remarkType.value = ""
          // }, 100)
          emit("refresh")
          ElMessage({ type: "success", message: `保存成功` })
        })
      } catch (e) {
        console.error(e)
      } finally {
        loading.value = false
      }
    } else {
    }
  })
}

const handleClose = (refresh) => {
  visible.value = false
  setTimeout(() => {
    remarkType.value = ""
    remarkText.value = ""
    // remarkId.value = []
    formData.value = {}
  }, 100)
}

watch(
  () => visible.value,
  (val) => {
    if (val) {
      formData.value.remarkText = remarkText.value
    }
  }
)

defineExpose({
  visible,
  remarkType,
  remarkText,
  remarkId,
  batchType,
  // formRef,
  // onSubmit,
  // resetForm,
  // submit,
  // getFormValues,
  // setFormValues
})
</script>
